<template>
  <view>
    <view class="gift-box">
      <view class="title">
        <text>收到的礼物</text>
      </view>
      <view class="receipt">
        <view class="receipt-item">
          <image :src="rose" mode="widthFix" class="rose" />
          <text>/6</text>
        </view>
        <view class="receipt-item">
          <image :src="kisses" mode="widthFix" class="kisses" />
          <text>/6</text>
        </view>

        <view class="receipt-item">
          <image :src="ring" mode="widthFix" class="ring" />
          <text>/6</text>
        </view>

        <view class="receipt-item">
          <image :src="ferrisw" mode="widthFix" class="ferrisw" />
          <text>/6</text>
        </view>
      </view>
    </view>
    <button class="btn">兑换金币</button>

    <view class="gift-box">
      <view class="title">
        <text>送出的礼物</text>
      </view>
      <view class="receipt">
        <view class="receipt-item">
          <image :src="rose" mode="widthFix" class="rose" />
          <text>/6</text>
        </view>
        <view class="receipt-item">
          <image :src="kisses" mode="widthFix" class="kisses" />
          <text>/6</text>
        </view>

        <view class="receipt-item">
          <image :src="ring" mode="widthFix" class="ring" />
          <text>/6</text>
        </view>

        <view class="receipt-item">
          <image :src="ferrisw" mode="widthFix" class="ferrisw" />
          <text>/6</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const rose = '../../../static/My/rose.png'
const kisses = '../../../static/My/kisses.png'
const ring = '../../../static/My/ring.png'
const ferrisw = '../../../static/My/Ferriswheel.png'
</script>

<style lang="scss" scoped>
.gift-box {
  display: flex;
  align-items: center;
  width: 90%;
  margin: auto;
  height: 15vh;
  margin-top: 10%;
}
.title {
  font-size: 2vh;
}
.receipt {
  display: flex;
  width: 75%;
}
.receipt-item {
  position: relative;
  width: 10vh;
  height: 100%;
  margin-left: 3%;
  overflow: hidden;
  text {
    position: absolute;
    bottom: 0;
    font-size: 2vh;
    color: black;
  }
}
.rose,
.kisses,
.ring,
.ferrisw {
  width: 5vh;
  height: 5vh;
}
.btn {
  position: absolute;
  align-items: center;
  right: 8%;
  background-color: #40ade3;
  color: white;
  border-radius: 25px;
  margin-top: 1%;
  font-size: 1.5vh;
}
</style>
